<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <!-- 添加SEO元标签 -->
  <meta name="description" content="人生计算器 - 一款可视化您人生时间进程的工具。输入出生日期和预期寿命，直观查看已度过的时间、剩余年数及人生阶段分布。支持图片导出，精确到秒的时间统计，智能分析和理解您的人生阶段，规划未来，珍惜当下的每一刻。——接入Deepseek" />
  <meta name="keywords" content="人生计算器,时间可视化,人生规划,生命统计,年龄计算器,人生时间线,人生阶段分析,人生智能分析,时间管理,人生规划工具,DeepSeek" />
  <meta name="author" content="JiQingzhe" />
  <meta name="msapplication-square96x96logo" content="/favicon-96x96.png" />
  <!-- Open Graph 标签 - 优化社交媒体分享 -->
  <meta property="og:title" content="人生计算器 | 可视化人生轨迹" />
  <meta property="og:description" content="直观了解您的人生进度，规划未来，珍视每一刻时光。——接入Deepseek" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://rsjsq.aiqji.com/og.png" />
  <meta property="og:url" content="https://rsjsq.aiqji.com/" />
  <meta property="og:img:width" content="1200" />
  <meta property="og:img:height" content="630" />
  <!-- 修正图标路径,不再使用src路径 -->
  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <!--适用于 Retina 屏的 iPad-->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-touch-icon-precomposed-144x144.png">
  <!--适用于 Retina 屏的 iPhone-->
  <link rel="apple-touch-icon-precomposed" sizes="120x120" href="./static/apple-touch-icon-precomposed-120x120.png">
  <!--适用于非 Retina 屏的 iPad-->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./static/apple-touch-icon-precomposed-72x72.png">
  <!--适用于非 Retina 屏的 iPhone-->
  <link rel="apple-touch-icon-precomposed" href="./static/apple-touch-icon-precomposed-57x57.png">
  <!-- PWA相关meta标签 -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="人生计算器" />
  <meta name="application-name" content="人生计算器" />
  <meta name="theme-color" content="#ffffff" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <!-- 更新manifest路径 -->
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>人生计算器</title>
</head>
<style>
  /* 滚动条美化 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: rgba(104, 104, 104, 0.3);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.505);
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(153, 255, 0, 0.598);
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  /* 暗黑模式滚动条 */
  .dark ::-webkit-scrollbar-track {
    background: rgb(60, 60, 60);
  }
  .dark ::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0);
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 140, 255, 0.598);
  }
  /* 特殊区域滚动条样式 - 如思维链区域 */
  .reasoning-content::-webkit-scrollbar-thumb {
    background: rgba(64, 158, 255, 0.3);
  }
  .reasoning-content::-webkit-scrollbar-thumb:hover {
    background: rgba(64, 158, 255, 0.5);
  }
  .dark .reasoning-content::-webkit-scrollbar-thumb {
    background: rgba(126, 185, 255, 0.25);
  }
  .dark .reasoning-content::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 185, 255, 0.4);
  }
  body {
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--primary-color);
  }
</style>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>